<!--
 * @Autor: dingxiaolin
 * @Date: 2022-09-20 10:57:07
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2022-11-04 11:15:18
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="viewport-fit=cover,width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
        />
        <title>船舶动态</title>
        <script src="../js/vue.min.js"></script>
        <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
        <script src="../js/axios.min.js"></script>
        <link
            rel="stylesheet"
            href="https://unpkg.com/vant@2.12/lib/index.css"
        />
        <script src="../js/browserMqtt.js"></script>
        <script src="../js/base64.js"></script>
        <script src="../js/moment.min.js"></script>
        <script
            type="text/javascript"
            src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"
        ></script>
        <script src="https://webapi.amap.com/maps?v=1.4.15&key=4cf22ce9ff76f8f8e3c6fdf59ebb2c39"></script>
        <!-- <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
        <script>
            let vConsole = new VConsole();
        </script> -->
        <link rel="stylesheet" href="../css/map.css" />
    </head>
    <body>
        <div id="app">
            <div id="loading-mask" ref="loading">
                <div class="loading-wrapper">
                    <span class="loading-dot loading-dot-spin">
                        <i></i><i></i><i></i><i></i>
                    </span>
                </div>
            </div>
            <div id="container"></div>
            <div id="todayData">
                <p>今日数据</p>
                <div class="box">
                    <div class="left">
                        <div class="label">
                            <div>天气</div>
                            <div>{{weathInfo.weatherInfo || '-'}}</div>
                        </div>
                        <div class="label">
                            <div>风力</div>
                            <div>{{weathInfo.windSpeed || '-'}}</div>
                        </div>
                        <div class="label">
                            <div>温度</div>
                            <div>{{weathInfo.airTemperature || '-'}}℃</div>
                        </div>
                        <div class="label">
                            <div>能见度</div>
                            <div>{{weathInfo.visibility || '-'}}米</div>
                        </div>
                        <div class="label">
                            <div>风向</div>
                            <div>{{weathInfo.windDirection || '-'}}</div>
                        </div>
                        <div class="label">
                            <div>湿度</div>
                            <div>{{weathInfo.humidity || '-'}}%</div>
                        </div>
                    </div>
                    <div class="middle">
                        <div class="line"></div>
                    </div>
                    <div class="right">
                        <div class="label">
                            <div>总航次</div>
                            <div>{{shippingInfo.totalVoyage || '-'}}</div>
                        </div>
                        <div class="label">
                            <div>总车辆</div>
                            <div>
                                {{shippingInfo.totalNumberOfVehicles || '-'}}
                            </div>
                        </div>
                        <div class="label">
                            <div>总人数</div>
                            <div>{{shippingInfo.totalNumber || '-'}}</div>
                        </div>
                        <div class="label">
                            <div>收费总金额</div>
                            <div>{{shippingInfo.tollAmount || '-'}}元</div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="alarmInfo">
                <van-collapse v-model="activeNames">
                    <van-collapse-item name="1">
                        <template #title>
                            <div class="title">
                                <img
                                    src="../image/bqqd/alarm.png"
                                    alt=""
                                />预警信息
                            </div>
                        </template>
                        <div
                            class="info"
                            v-for="(item,index) in alarmList"
                            :key="index"
                        >
                            <span @click="toDetail(item.alarmCode)">
                                {{item.typeName}}：{{item.shipName}}</span
                            >
                            <van-icon
                                name="cross"
                                @click.stop="delAlarm(index)"
                            />
                        </div>
                    </van-collapse-item>
                </van-collapse>
            </div>

            <div id="notice" @click="noticeHandle">
                <img src="../image/bqqd/notice.png" alt="" />
                <span>通知</span>
            </div>
            <div id="sound" @click="toggleSound">
                <img src="../image/bqqd/vopen.png" alt="" v-if="volume" />
                <img src="../image/bqqd/vclose.png" alt="" v-else />
                <span>语音</span>
            </div>
            <audio
                ref="alertAudioEl"
                src="../sound.mp3"
                style="visibility: hidden"
            />
            <van-popup v-model="showPop" get-container="body">
                <div class="title">预警通知设置</div>
                <div
                    class="alarmTypeList"
                    v-for="(v,i) in alarmTypeList"
                    :key="i"
                    @click="storageStatus"
                >
                    <span>{{v.label}}</span
                    ><van-switch v-model="v.checked" size="26px" />
                </div>
            </van-popup>
        </div>
        <script>
            const key = "ce6efc528c9890f66eb7b5dce8b78d5b"; //天地图的key
            var app = new Vue({
                el: "#app",
                data: {
                    volume: true,
                    showPop: false,
                    checked: false,
                    client: null,

                    /**信息窗体 */
                    infoWindow: new AMap.InfoWindow({
                        isCustom: true,
                        offset: new AMap.Pixel(0, -20),
                    }),
                    /**圆形底盘 */
                    circleMarker: new AMap.CircleMarker({
                        radius: 20, //3D视图下，CircleMarker半径不要超过64px
                        strokeColor: "red",
                        strokeWeight: 2,
                        strokeOpacity: 0.5,
                        fillOpacity: 0.5,
                        zIndex: 10,
                        bubble: true,
                        cursor: "pointer",
                        clickable: true,
                    }),

                    /**天地图底图 */
                    xyzTileLayer: new AMap.TileLayer({
                        getTileUrl: `http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=vec_w&tk=${key}&x=[x]&y=[y]&l=[z]`,
                        zIndex: 1,
                    }),
                    /**天地图文字标注图 */
                    wordTileLayer: new AMap.TileLayer({
                        getTileUrl: `http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cva_w&tk=${key}&x=[x]&y=[y]&l=[z]`,
                        zIndex: 2,
                    }),
                    /**纯长江航道图 */
                    cjTileUrl: new AMap.TileLayer.WMS({
                        url: "http://geo.jinhx.cn:8089/geoserver/gwc/service/wms",
                        tileSize: 256,
                        zIndex: 3,
                        params: {
                            SERVICE: "WMS",
                            FORMAT: "image/png",
                            VERSION: "1.1.1",
                            request: "GetMap",
                            tiled: true,
                            SRS: "EPSG:3857",
                            LAYERS: "marinfo:hq",
                        },
                    }),
                    /**海事图 */
                    seaLayer: new AMap.TileLayer({
                        getTileUrl: function (x, y, z) {
                            var imgurl =
                                "http://222.186.130.225:8099/ALL/" +
                                z +
                                "/" +
                                x +
                                "/" +
                                y +
                                ".png";
                            return imgurl;
                        },
                        zIndex: 1,
                    }),
                    /**覆盖物群组 */
                    overlayGroup: new AMap.OverlayGroup(),
                    /**船舶标注 */
                    shipMarkers: [],
                    mmsiList: [],
                    map: null,
                    mmsiChecked: false,
                    timer: null,
                    minute: 1,
                    weathInfo: {
                        weatherInfo: "",
                        windSpeed: "",
                        airTemperature: "",
                        visibility: "",
                        weatherInfo: "",
                        windDirection: "",
                        humidity: "",
                    },
                    shippingInfo: {
                        totalVoyage: "",
                        totalNumberOfVehicles: "",
                        totalNumber: "",
                        tollAmount: "",
                    },
                    activeNames: ["1"],
                    alarmList: [],
                    alarmTypeList: [
                        { label: "碰撞预警", type: "1", checked: true },
                        { label: "驾驶员行为预警", type: "2", checked: true },
                        { label: "电子围栏预警", type: "3", checked: true },
                        {
                            label: "重点部位监控预警",
                            type: "4",
                            checked: true,
                        },
                        { label: "岗前健康预警", type: "5", checked: true },
                        { label: "在岗健康预警", type: "6", checked: true },
                        { label: "环境预警", type: "7", checked: true },
                    ],
                    timer1: null,
                    timer2: null,
                },
                mounted() {
                    if (localStorage.getItem("alarmTypeList")) {
                        this.alarmTypeList = JSON.parse(
                            localStorage.getItem("alarmTypeList")
                        );
                    }
                    if (localStorage.getItem("volume")) {
                        this.volume = JSON.parse(
                            localStorage.getItem("volume")
                        );
                    }
                    this.$refs.loading.style.display = "none";
                    this.initMap();
                    this.mqtt();
                    this.getTodayData();
                },
                destroyed() {
                    console.log("destroyed");
                    clearInterval(this.timer1);
                    clearInterval(this.timer2);
                },
                methods: {
                    getWeather() {
                        axios
                            .post(
                                "http://101.35.194.154:8800/api/app-shipping/openapi-app/appWeatherInfo"
                            )
                            .then((res) => {
                                this.weathInfo = res.data.data;
                            })
                            .catch((err) => {
                                vant.Toast(err);
                            });
                    },
                    getShipping() {
                        axios
                            .post(
                                "http://101.35.194.154:8800/api/app-shipping/openapi-app/appAllShippingInfo",
                                {
                                    startDate: moment().format("YYYY-MM-DD"),
                                }
                            )
                            .then((res) => {
                                this.shippingInfo = res.data.data
                                    ? res.data.data[0]
                                    : {};
                            })
                            .catch((err) => {
                                vant.Toast(err);
                            });
                    },
                    getTodayData() {
                        // 气象数据接口
                        if (this.timer1 == null) {
                            this.getWeather();
                            this.timer1 = setInterval(() => {
                                this.getWeather();
                            }, 1000 * 60 * 60);
                        }
                        // 所有船舶航行统计
                        if (this.timer2 == null) {
                            this.getShipping();
                            this.timer2 = setInterval(() => {
                                this.getShipping();
                            }, 1000 * 5);
                        }
                    },
                    initMap() {
                        const options = {
                            resizeEnable: true,
                            // rotation: -15,
                            viewMode: "2D", //开启3D视图,默认为关闭
                            // expandZoomRange: true, // 扩展缩放级别到20
                            zoom: 13.5,
                            // zooms: [3, 20],
                            layers: [
                                this.cjTileUrl,
                                this.xyzTileLayer,
                                this.wordTileLayer,
                            ], //常规图
                            center: [118.613108, 31.944813],
                        };
                        // 创建地图实例
                        this.map = new AMap.Map("container", options);
                        this.circleMarker.setMap(this.map);
                        this.drawFence();
                    },
                    mqtt() {
                        this.client = mqtt.connect(
                            "ws://101.35.194.154:8083/mqtt",
                            {
                                username: "ship",
                                password: "ship@2021.11.24",
                            }
                        );
                        this.client.on("connect", (e) => {
                            console.log("连接成功");
                            this.client.subscribe("app_alarm_info", (err) => {
                                if (!err) {
                                    console.log(
                                        "船舶预警事件,订阅成功:app_alarm_info"
                                    );
                                }
                            });
                            this.client.subscribe("shipInfo_3D", (err) => {
                                if (!err) {
                                    console.log("别家船,订阅成功:shipInfo_3D");
                                }
                            });
                            this.client.subscribe(
                                "inertialSensorAndGps_3D",
                                (err) => {
                                    if (!err) {
                                        console.log(
                                            "自家船,订阅成功:inertialSensorAndGps_3D"
                                        );
                                    }
                                }
                            );
                            // this.client.subscribe("yar28n_no_mmsi", (err) => {
                            //     if (!err) {
                            //         console.log("雷达未识别,订阅成功:yar28n_no_mmsi");
                            //     }
                            // });
                        });
                        this.client.on("message", (topic, message) => {
                            let data = JSON.parse(message.toString());
                            if (topic.includes("app_alarm_info")) {
                                console.log(
                                    "船舶告警事件内容：" + message.toString()
                                );
                                let arr = this.alarmTypeList.filter(
                                    (v) => v.type == data.typeId
                                );
                                console.log(
                                    "cccc",
                                    data.typeName,
                                    this.alarmTypeList,
                                    arr
                                );
                                if (!arr[0].checked) return;
                                if (this.alarmList.length >= 10) {
                                    this.alarmList.shift();
                                }
                                this.alarmList.push({
                                    alarmCode: data.alarmCode,
                                    typeName: data.typeName,
                                    shipName: data.shipName,
                                });
                                this.volume && this.$refs.alertAudioEl.play();
                            }
                            if (topic.includes("yar28n_no_mmsi")) {
                                if (
                                    data["targetLng"] &&
                                    data["targetLat"] &&
                                    data["targetCourse"]
                                ) {
                                    data.position = new AMap.LngLat(
                                        data["targetLng"],
                                        data["targetLat"]
                                    );
                                    data.shipMmsi = data["ttCode"];
                                    data.shipLng = data["targetLng"];
                                    data.shipLat = data["targetLat"];
                                    data.shipName = data["targetName"];
                                    data.shipCourse = data["targetCourse"];
                                    data.shipSpeed = data["targetSpeed"];
                                    this.loadBoat(data, 1);
                                }
                            }
                            if (topic.includes("shipInfo_3D")) {
                                if (
                                    data["targetLng"] &&
                                    data["targetLat"] &&
                                    data["targetCourse"]
                                ) {
                                    data.position = new AMap.LngLat(
                                        data["targetLng"],
                                        data["targetLat"]
                                    );
                                    data.shipMmsi = data["targetMmsi"];
                                    data.shipLng = data["targetLng"];
                                    data.shipLat = data["targetLat"];
                                    data.shipName = data["targetName"];
                                    data.shipCourse = data["targetCourse"];
                                    data.shipSpeed = data["targetSpeed"];
                                    this.loadBoat(data, 2);
                                }
                            }
                            if (topic.includes("inertialSensorAndGps_3D")) {
                                if (
                                    data["shipLng"] &&
                                    data["shipLat"] &&
                                    data["shipCourse"]
                                ) {
                                    data.position = new AMap.LngLat(
                                        data["shipLng"],
                                        data["shipLat"]
                                    );
                                    this.loadBoat(data, 3);
                                }
                            }
                        });
                        // 断开发起重连
                        this.client.on("reconnect", (error) => {
                            console.log("正在重连:", error);
                        });
                        // 链接异常处理
                        this.client.on("error", (error) => {
                            console.log("连接失败:", error);
                        });
                    },
                    isPointInRing(position, bounds) {
                        const NorthEast = bounds.getNorthEast();
                        const SouthWest = bounds.getSouthWest();
                        const SouthEast = [NorthEast.lng, SouthWest.lat];
                        const NorthWest = [SouthWest.lng, NorthEast.lat];
                        const path = [
                            [NorthEast.lng, NorthEast.lat],
                            SouthEast,
                            [SouthWest.lng, SouthWest.lat],
                            NorthWest,
                        ];
                        return AMap.GeometryUtil.isPointInRing(position, path); // 判断point是否在可视区域
                    },
                    loadBoat(data, i) {
                        if (!this.mmsiList.includes(data.shipMmsi)) {
                            this.mmsiList.push(data.shipMmsi);
                            let shipmarker = new AMap.Marker({
                                position: data.position,
                                zooms: [3, 18],
                                anchor: "center",
                                offset: new AMap.Pixel(0, 0),
                                autoRotation: false,
                                extData: {
                                    reportingTime: data["reportingTime"],
                                    mmsi: data["shipMmsi"],
                                    ttCode: data["ttCode"],
                                    content: `<div style="background: rgba(0, 0, 0, 0.3);color:#fff;padding:10px;font-size:12px;"><div>船名：${
                                        data["shipName"] ? data["shipName"] : ""
                                    }</div><div>MMSI：${
                                        data["shipMmsi"]
                                    }</div> <div>航速：${parseFloat(
                                        data["shipSpeed"]
                                    )}km/h</div><div>航向：${
                                        data["shipCourse"]
                                    }°</div><div>更新时间：${
                                        data["reportingTime"]
                                    }</div></div>`,
                                },
                            });
                            if (i == 1) {
                                let color = "rgba(255, 255, 0, 1)"; //黄 雷达
                                var svg = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="14"  height="14"><circle cx="7" cy="7" r="6" stroke="black" stroke-width="1" fill="${color}"/></svg>`;
                            } else if (i == 2) {
                                if (data["type"] == "0") {
                                    let color = "rgba(255, 255, 0, 1)"; //黄 AIS
                                    var svg = `
                                                  <svg width="16" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="8,1 8,11 14,29 2,29 8,11" style="fill:${color};stroke:#000000;stroke-width:1" /></svg>`;
                                }
                                if (data["type"] == "2") {
                                    var color = "green"; // 深绿 融合的
                                    var svg = `
                                                  <svg width="16" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="8,1 8,11 14,29 2,29 8,11" style="fill:${color};stroke:#000000;stroke-width:1" /></svg>`;
                                }
                            } else if (i == 3) {
                                var color = "rgba(0, 255, 0, 1)"; //绿
                                var svg = `
                      <svg width="16" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="8,1 8,11 14,29 2,29 8,11" style="fill:${color};stroke:#000000;stroke-width:1" /></svg>`;
                            }
                            const boat =
                                "data:image/svg+xml;base64," +
                                base64encode(svg);
                            shipmarker.setIcon(boat);
                            if (this.mmsiChecked) {
                                shipmarker.setLabel({
                                    offset: new AMap.Pixel(0, 0),
                                    content: data["shipMmsi"],
                                    direction: "bottom",
                                });
                            } else {
                                shipmarker.setLabel({
                                    content: "",
                                });
                            }
                            shipmarker.on("click", this.showInfoOver);
                            this.map.on("click", this.showInfoOut);
                            // shipmarker.on("touchstart", this.showInfoOver);
                            // shipmarker.on("touchend", this.showInfoOut);
                            this.overlayGroup.addOverlay(shipmarker);
                            this.map.add(this.overlayGroup);
                        } else {
                            let markers = [];
                            this.overlayGroup.eachOverlay(
                                (marker, index, collections) => {
                                    const shipMmsi = marker.getExtData().mmsi;
                                    const reportingTime =
                                        marker.getExtData().reportingTime;
                                    if (
                                        moment().subtract(
                                            this.minute,
                                            "minutes"
                                        ) > moment(reportingTime)
                                    ) {
                                        markers.push(marker);
                                        var index = this.mmsiList.findIndex(
                                            (v) => v == shipMmsi
                                        );
                                        if (index > -1) {
                                            this.mmsiList.splice(index, 1);
                                        }
                                    }
                                    if (
                                        data["shipMmsi"] ==
                                        marker.getExtData().mmsi
                                    ) {
                                        // console.log(data['shipMmsi'], data['shipLng'], data['shipLat'], data['shipCourse'], data['reportingTime'])
                                        if (data["type"] == "0") {
                                            let color = "rgba(255, 255, 0, 1)"; //黄 AIS
                                            var svg = `
                                                  <svg width="16" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="8,1 8,11 14,29 2,29 8,11" style="fill:${color};stroke:#000000;stroke-width:1" /></svg>`;
                                            const boat =
                                                "data:image/svg+xml;base64," +
                                                base64encode(svg);
                                            marker.setIcon(boat);
                                        }
                                        if (data["type"] == "2") {
                                            var color = "green"; // 绿 融合的
                                            var svg = `
                                                  <svg width="16" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon points="8,1 8,11 14,29 2,29 8,11" style="fill:${color};stroke:#000000;stroke-width:1" /></svg>`;
                                            const boat =
                                                "data:image/svg+xml;base64," +
                                                base64encode(svg);
                                            marker.setIcon(boat);
                                        }
                                        marker.setAngle(
                                            Number(data["shipCourse"])
                                        );
                                        marker.setExtData({
                                            reportingTime:
                                                data["reportingTime"],
                                            mmsi: data["shipMmsi"],
                                            content: `<div style="background: rgba(0, 0, 0, 0.3);color:#fff;padding:10px;font-size:12px;"><div>船名：${
                                                data["shipName"]
                                                    ? data["shipName"]
                                                    : ""
                                            }</div><div>MMSI：${
                                                data["shipMmsi"]
                                            }</div> <div>航速：${parseFloat(
                                                data["shipSpeed"]
                                            )}km/h</div><div>航向：${
                                                data["shipCourse"]
                                            }°</div><div>更新时间：${
                                                data["reportingTime"]
                                            }</div></div>`,
                                        });
                                        if (this.animation) {
                                            marker.moveTo(
                                                data.position,
                                                Number(data["shipSpeed"]) || 0
                                            );
                                            // marker.moveTo(data.position, Number(data['shipSpeed']) * 1.852 || 0)
                                        } else {
                                            marker.setPosition(data.position);
                                        }
                                    }

                                    if (this.mmsiChecked) {
                                        marker.setLabel({
                                            offset: new AMap.Pixel(0, 0),
                                            content: marker.getExtData().mmsi,
                                            direction: "bottom",
                                        });
                                    } else {
                                        marker.setLabel({
                                            content: "",
                                        });
                                    }
                                }
                            );
                            this.overlayGroup.removeOverlays(markers);
                        }

                        // this.map.setFitView(
                        //     this.overlayGroup.getOverlays(),
                        //     false,
                        //     [0, 0, 0, 0],
                        //     17
                        // );
                    },

                    /**信息窗体 */
                    showInfoOver(e) {
                        const position = e.target.getPosition();
                        this.infoWindow.setContent(
                            e.target.getExtData().content
                        );
                        this.infoWindow.open(this.map, [
                            position["lng"],
                            position["lat"],
                        ]);
                        this.circleMarker.setCenter([
                            position["lng"],
                            position["lat"],
                        ]);
                        this.circleMarker.show();
                    },
                    showInfoOut(e) {
                        this.infoWindow.close();
                        this.circleMarker.hide();
                    },
                    /**
                     * 获得图形的中心点
                     */
                    getCenterPoint(path) {
                        var lng = 0.0,
                            lat = 0.0;
                        for (var i = 0; i < path.length; i++) {
                            lng = lng + parseFloat(path[i][0]);
                            lat = lat + parseFloat(path[i][1]);
                        }
                        lng = lng / path.length;
                        lat = lat / path.length;
                        return [lng, lat];
                    },
                    /** 关闭开启语音 */
                    toggleSound() {
                        this.volume = !this.volume;
                        localStorage.setItem("volume", this.volume);
                    },
                    /** 删除预警*/
                    delAlarm(i) {
                        this.alarmList.splice(i, 1);
                    },
                    getQueryString(name) {
                        var url = location.search; //获取url中"?"符后的字串
                        var theRequest = new Object();
                        if (url.indexOf("?") != -1) {
                            var str = url.substr(1);
                            var strs = str.split("&");
                            for (var i = 0; i < strs.length; i++) {
                                theRequest[strs[i].split("=")[0]] =
                                    decodeURIComponent(strs[i].split("=")[1]);
                            }
                        }
                        return theRequest[name];
                    },
                    /** 绘制电子围栏 */
                    drawFence() {
                        var list = [
                            [118.61083050457253, 31.950996571527497],
                            [118.62283321332913, 31.945255581810816],
                            [118.617406205699, 31.940285361739065],
                            [118.60045882346306, 31.94524196225786],
                        ];
                        let path = list.map(
                            (item) => new AMap.LngLat(item[0], item[1])
                        );
                        var polygon = new AMap.Polygon({
                            path: path,
                            fillColor: "#32a4f1", // 多边形填充颜色
                            strokeWeight: 0.8, // 线条宽度，默认为 1
                            strokeColor: "red", // 线条颜色
                            fillOpacity: 0.2,
                        });
                        this.map.add(polygon);
                    },
                    /**
                     * 跳转uni内页
                     */
                    toDetail(alarmCode) {
                        // document.addEventListener("UniAppJSBridgeReady", () => {
                        uni.navigateTo({
                            url:
                                "/subShip/alarm/detail/index?alarmCode=" +
                                alarmCode,
                        });
                        // });
                    },
                    /**
                     * 关闭通知
                     */
                    noticeHandle() {
                        this.showPop = true;
                    },
                    /**
                     * 存储状态
                     */
                    storageStatus() {
                        // uni.postMessage({
                        //     data: this.alarmTypeList,
                        // });
                        localStorage.setItem(
                            "alarmTypeList",
                            JSON.stringify(this.alarmTypeList)
                        );
                    },
                },
            });
        </script>
    </body>
</html>
